<template>
    <div class="person">
        <h2>汽车信息:一台{{ car.brand }}汽车,价值为{{ car.price }}</h2>
        <ul>
        <li v-for="g in games" key="g.id">{{ g.name }}</li>
    </ul>
    <h2>测试:{{ obj.a.b.c.d }} </h2>
    <button @click="changeCarPriceBrand">修改汽车和价格</button>
    <button @click="changeCarAll">修改汽车和价格</button>
    <button @click="changeFirstGame">修改我们的游戏名字</button>

    <button @click="test">测试</button>
    </div>
</template>
<script lang="ts" setup name='Person'>
import { ref, reactive } from 'vue';
let car = reactive({brand: "大众", price: 1000})
let games = reactive([{ id: 'game1', name: "GG" },{ id: 'game2', name: "TT" },{ id: 'game3', name: "SS" }])
let obj = ref({a: {b: {c: { d:666}} }})
function changeCarPriceBrand() {
    car.brand = "广汽", car.price += 1000
}
function changeFirstGame() {
    // 如果变为ref 我们都应该+value才能读到属性
        // games.value[0].name = "球球"
        games[0].name = "球球"
    }
function test() { obj.value.a.b.c.d = 99 }

/* 
    最大的区别之一,ref创建的变量都需要+上value,来进行修改.....
*/


/* 假如我们需要这个数值进行更新,后台是单个单个,我们还可以利用其键对值结构进行单个单的修改.但假如当我们的后端一下子给予了我们很多条数据,就会导致我们要有多少条写多少条,这样显得很笨很冗余
    所以我们一边会直接回把后端给的所有数据进行一个更新,也就是把这个对象重新的进行一个赋值........
    如:
    car.value.brand = "广汽", car.value.price += 1000
    car.value.brand = "广汽", car.value.price += 1000
    car.value.brand = "广汽", car.value.price += 1000
    car.value.brand = "广汽", car.value.price += 1000
    car.value.brand = "广汽", car.value.price += 1000
    car.value.brand = "广汽", car.value.price += 1000

*/

function changeCarAll() {
/*     car = {brand: "g众", price: 10100}
        假如我们`car`重新分配一个新对象，会失去响应式
        会导致前端的数据失去响应,无法更新.
        我们可以利用Object的assign方法去进行整体的替换
        在内存界面可以理解为浅复制,把其所有的值都复制粘贴过来,并且内存地址也一样,都复制过来,所以修改时,指向的内存地址也相同,故而修改时会将之前的内容也进行就修改

        但是我们如果是ref的话,
        只需要对其的value属性进行重新赋值,就可以了,因为只要对value属性进行修改或者操作,其响应式照样存在
        */
    let car1 =  Object.assign(car, { brand: "g众", price: 10100 })
        console.log(car1);
        console.log(car);
        
}
</script>
<style scoped>
/*  组件的样式 */
    .person{
            /* 设置颜色,设置阴影,
            设置元素的外边框圆角,使用一个半径可以确定一个圆形,当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。
            设置内边距
            */
        background-color: aqua;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }


</style>
